$(function () {
  // 1.1 获取裁剪区域的 DOM 元素
  let $image = $('#image')
  // 1.2 配置选项
  let options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $('#image').cropper(options)

  // 选择图片
  $('#chooseImageBtn').on('click', function () {
    $('#chooseImageInp').click()
  })

  //   //渲染图片
  $('#chooseImageInp').on('change', function () {
    // console.log(this.files[0])
    let file = this.files[0]

    if (file === undefined) {
      return layui.layer.msg('上传头像,不能为空!')
    }
    let newUrl = URL.createObjectURL(file)
    // console.log(url)
    $image
      .cropper('destroy')
      .attr('src', newUrl)
      .cropper(options)
  })

  //   // 上传头像
  $('#btnUploadImg').on('click', function () {
    let dataURL = $image
      .cropper('getCroppedCanvas', {
        width: 100,
        height: 100
      })
      .toDataURL('image/png')
    console.log(dataURL)

    //     // 发送ajax更换用户头像
        axios({
          url: '/my/update/avatar',
          method: 'post',
          data: 'avatar=' + encodeURIComponent(dataURL)
        }).then(res => {
          //   //成功回调
          //   console.log(res)
          if (res.data.status !== 0) {
            return layui.layer.msg(res.data.message)
          }
          // 成功 : 提示 + 刷新父页面头像渲染
          layui.layer.msg('更改用户头像成功')
          window.parent.getUserInfo()
        })
  })
})
